<template>
  <div id="orderDetail">
    <x-header>确认订单</x-header>
    <div class="addressBox" @click="receiptAddress">
      <div class="addr_icon"><img src="assets/position3.png"></div>
      <div class="addr_info">
        <div class="connect">
          <div class="name">王小姐</div>
          <span class="phone">15211111110 ></span>
        </div>
        <div class="address">
          湖南省长沙市芙蓉区车站北路证券大厦4楼
        </div>
      </div>
    </div>
    <div class="order_box">
      <div v-for="(parent,index) in orderList" :key="index">
        <div class="order_title">
          <div class="order_name">
            <img src="/assets/shop1.png"/>
            <span>{{parent.name}}</span>
            <span>></span>
          </div>
        </div>
        <div class="order_list">
          <ul>
            <li v-for="child in parent.list" :key="child.index">
              <div class="list_img"><img :src="child.src"></div>
              <div class="list_text">
                <h3>{{child.title}}</h3>
                <div class="line2">
                  <div class="color">{{child.color}}</div>
                </div>
                <div class="info">
                  <div class="price">￥{{child.price}}</div>
                  <div class="num">{{child.num}}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="postage">
      <p>邮费 (含打包费)</p>
      <span>￥18</span>
    </div>
    <div class="message">
      <p>留言</p>
      <textarea placeholder="祝福卡留言/特殊要求/其他"></textarea>
    </div>
    <div class="orderTotal">
      <div class="moneyTotal">
        <span>共1件商品</span>
        <span>小计：￥58</span>
      </div>
      <div class="goodsTotal">
        <div>
          <span class="name">共1件商品</span><span class="value">￥58</span>
        </div>
        <div>
          <span class="name">运费 (物流+打包费)</span><span class="value">￥18</span>
        </div>
      </div>
    </div>
    <div class="firmOrder">
      <div class="totalBox">
        合计：<span>￥58</span>
      </div>
      <button class="ensureBtn" @click="firmOrder">确认</button>
    </div>
    <div v-transfer-dom>
      <confirm v-model="ensureTip" title="订单确认" @on-cancel="orderCancel" @on-confirm="orderConfirm">
        <p style="text-align:center;">确认提交订单吗？</p>
      </confirm>
    </div>
    <div>
      <popup v-model="pay" @on-hide="payment('hide')" @on-show="payment('show')">
        <div class="popup0">
          <div class="payment">
            <div class="payMoney">
              <div class="pay">需要支付：<span>￥88</span></div>
              <div class="close"><x-icon type="ios-close" size="30" @click="closePay"></x-icon></div>
            </div>
            <div class="payMethod">
              <div class="methodList" v-for="item in paymentList" :key="item.id">
                <div class="payImg"><img src=""/></div>
                <div class="methodName">
                  {{item.name}}
                  <p>{{item.desc}}</p>
                </div>
                <div @click="changeState(item.id)">
                  <span v-if="checked==item.id">
                    <x-icon type="ios-checkmark" class="checker"></x-icon>
                  </span>
                  <span v-else>
                    <x-icon type="ios-circle-outline" class="checker"></x-icon>
                  </span>
                </div>
              </div>
            </div>
            <button class="payBtn" @click="ensurePay">确定</button>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        ensureTip:false,
        pay:false,
        orderList:[{
          orderId:1,
          name:"花都",
          list:[
            {src:"assets/flower1.jpg",title:"白色多头康乃馨",color:"白色",price:"88",num:'x1',selected:false},
            {src:"assets/flower2.jpg",title:"粉色多头康乃馨",color:"粉色",price:"98",num:'x1',selected:false}
          ]
        },
          {
            orderId:2,
            name:"花之林",
            list:[
              {src:"assets/flower1.jpg",title:"白色多头康乃馨",color:"白色",price:"88",num:'x1',selected:false}
            ]
          }
        ],
        checked:1,
        paymentList:[
          {id:1,name:"支付宝支付",desc:"推荐有支付宝账号的用户使用",img:"",checked:true},
          {id:2,name:"微信支付",desc:"推荐安装微信5.0以上版本使用",img:"",checked:false}
        ]
      }
    },
    methods:{
      receiptAddress(){
        this.$router.push({path:'/receivingAddress'})
      },
      firmOrder(){
        this.ensureTip = true;
      },
      orderCancel () {
        console.log('on cancel')
      },
      orderConfirm () {
        console.log('on confirm');
        this.pay = true;
      },
      payment(){

      },
      ensurePay(){
        this.pay = false;
      },
      closePay(){
        this.pay = false;
      },
      changeState(key){
        this.checked = key;
      }
    }
  }
</script>

<style lang="less">
  #orderDetail{
    position: relative;
    margin-bottom: 45px;
    .addressBox{
      width: 100%;
      height: 50px;
      padding: 10px 0 5px 0;
      border-bottom: 1px solid #c6c6c6;
      display: flex;
      align-items:center;
    .addr_icon{
      width:15%;
      text-align: center;
      img{
        width: 17px;
        height: 17px;
      }
    }
    .addr_info{
      width: 80%;
      .connect{
        display: flex;
        .name{
          width: 50%;
          font-size: 14px;
        }
        .phone{
          width: 50%;
          text-align: right;
        }
      }
      .address{
        color: #c6c6c6;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
  .order_box{
    padding: 10px;
  }
  .order_title{
    display: flex;
    img{
      width: 15px;
      height: 15px;
      margin: 5px 5px 0 5px;
    }
  }
  .order_name{
    width: 100%;
    height: 30px;
    span{
      padding: 0 5px;
    }
  }
  .order_list{
    li{
      padding: 10px 0;
      background: #f3f3f3;
      border-bottom:1px solid #c6c6c6;
      display: flex;
      align-items:center;
      margin-bottom:10px;
      input{
        margin-right: 10px;
      }
    }
    li:last-child{ margin-bottom: 0;}
    }
  .list_img{
    margin-right:10px;
    width: 80px;
    height: 80px;
    img{
      width: 80px;
      height: 80px;
    }
  }
  .list_text{
    width:67%;
    h3{
      font-weight: normal;
      font-size: 16px;
    }
    .color{
      font-size: 12px;
      color: #c6c6c6;
      width: 80%;
    }
  }
  .line2{
    display: flex;
  }
  .info{
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    .price{
      color: #ffa534;
      width: 80%;
    }
    .num{
      width:20%;
      text-align: right;
    }
  }
  .postage{
    font-size: 14px;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #c6c6c6;
    p{
      width: 80%;
    }
    span{
      width: 20%;
      text-align: right;
    }
  }
  .message{
    padding: 10px;
    border-bottom: 1px solid #c6c6c6;
    p{
      font-size: 14px;
      line-height: 24px;
    }
    textarea{
      border: none;
      width: 100%;
      height: 60px;
      overflow-y: auto;
      background: none;
      outline:none
    }
  }
  .orderTotal{
    .moneyTotal{
      padding:10px;
      text-align: right;
      font-size: 14px;
      border-bottom: 1px solid #c6c6c6;
      span{
        margin-left: 5px;
      }
    }
    .goodsTotal{
      padding:10px;
      font-size:14px;
      div{
        display:flex;
      .name{
        width: 80%;
      }
      .value{
        width: 20%;
        text-align: right;
        color: #ffa534;
      }
    }
  }
  }
  .firmOrder{
    position: fixed;
    bottom: 0px;
    left: 0;
    height: 40px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #c6c6c6;
    display: flex;
    line-height: 40px;
    .totalBox{
      width: 80%;
      font-size: 14px;
      margin-left:10px;
    span{
      color: #ffa534;
      font-size: 12px;
      margin: 0 6px;
    }
  }
  .ensureBtn{
    border: none;
    width: 20%;
    background: #ffa534;
    color: #fff;
    text-align: center;
  }
  }
  .payment{
    width: 100%;
    height: 222px;
    background: #fff;
    position:relative;
  .payMoney{
    display: flex;
    padding: 10px;
    height: 30px;
    line-height: 30px;
  .pay{
    width: 90%;
  }
  .close{
    width: 10%;
  }
  }
  .vux-x-icon {
    fill: #dcdcdc;
  }
  .methodList{
    display: flex;
    padding: 5px 0px;
    margin: 0 10px;
    align-items:center;
    border-bottom:1px solid #c6c6c6;
    .payImg{
      width: 34px;
      height: 34px;
      margin-right: 10px;
      background: #c6c6c6;
    }
    .methodName{
      font-size: 14px;
      width:76%;
      p{
        color: #c6c6c6;
      }
    }
    .checker {
      vertical-align: middle;
      margin-bottom: 4px;
      fill: #ffa534;
    }
  }
  .methodList:last-child{ border-bottom: none;}
  .payBtn{
    position:absolute;
    bottom: 0;
    left: 0;
    border: none;
    font-size: 14px;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #e9e9e9;
  }
  }
  }

</style>

